<template>
  <view class="address-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">地址管理</text>
      </view>
      <view class="nav-right">
        <text class="add-btn" @click="addAddress">添加</text>
      </view>
    </view>
    
    <!-- 地址列表 -->
    <scroll-view class="address-list" scroll-y>
      <!-- 加载状态 -->
      <view class="loading-state" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>
      
      <view 
        class="address-item" 
        v-for="(item, index) in addressList" 
        :key="index"
        @click="selectAddress(item)"
      >
        <view class="address-info">
          <view class="address-header">
            <text class="contact-name">{{ item.name }}</text>
            <text class="contact-phone">{{ item.phone }}</text>
            <view class="default-tag" v-if="item.isDefault">
              <text class="default-text">默认</text>
            </view>
          </view>
          <text class="address-detail">{{ item.address }}</text>
        </view>
        <view class="address-actions">
          <view class="action-btn" @click.stop="setDefaultAddress(item, index)" v-if="!item.isDefault">
            <text class="action-text">设为默认</text>
          </view>
          <view class="action-btn disabled" v-if="item.isDefault">
            <text class="action-text">已默认</text>
          </view>
          <view class="action-btn" @click.stop="editAddress(item, index)">
            <text class="action-text">编辑</text>
          </view>
          <view class="action-btn delete" @click.stop="deleteAddress(index)">
            <text class="action-text">删除</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="!loading && addressList.length === 0">
        <text class="empty-text">暂无收货地址</text>
        <text class="empty-desc">点击右上角"添加"按钮新增地址</text>
      </view>
    </scroll-view>
    
    <!-- 添加/编辑地址弹窗 -->
    <view class="address-mask" v-if="addressFormVisible" @click="closeForm"></view>
    <view class="address-form" v-if="addressFormVisible" @click.stop>
      <view class="form-header">
        <text class="form-title">{{ isEdit ? '编辑地址' : '添加地址' }}</text>
        <text class="close-btn" @click="closeForm">✕</text>
      </view>
      
      <view class="form-content">
        <view class="form-item">
          <text class="form-label">收货人</text>
          <input 
            class="form-input" 
            type="text" 
            placeholder="请输入收货人姓名"
            v-model="formData.name"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">手机号</text>
          <input 
            class="form-input" 
            :class="{ 'error': phoneError }"
            type="number" 
            placeholder="请输入手机号"
            v-model="formData.phone"
            @blur="validatePhone"
            @input="clearPhoneError"
          />
          <text class="error-text" v-if="phoneError">{{ phoneError }}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">所在地区</text>
          <picker 
            mode="multiSelector" 
            :range="pickerColumns" 
            :value="pickerValue"
            @change="onRegionChange"
            @columnchange="onColumnChange"
            range-key="label"
          >
            <view class="picker-display">
              <text class="picker-text" :class="{ 'placeholder': !regionText }">
                {{ regionText || '请选择省市区' }}
              </text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">详细地址</text>
          <textarea 
            class="form-textarea" 
            placeholder="请输入详细地址，如道路、门牌号、小区、楼栋号等"
            v-model="formData.address"
          ></textarea>
        </view>
        
        <view class="form-item">
          <view class="default-option" @click="toggleDefault">
            <view class="checkbox" :class="{ 'checked': formData.isDefault }">
              <text class="checkmark" v-if="formData.isDefault">✓</text>
            </view>
            <text class="option-text">设为默认地址</text>
          </view>
        </view>
      </view>
      
      <view class="form-footer">
        <button class="save-btn" @click="saveAddress">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
import addressService from '../../services/address.js'
import authService from '../../services/auth.js'
import cityData from '../../utils/city-data.js'
import { backToProfile, smartBack } from '../../utils/navigation.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      addressFormVisible: false,
      isEdit: false,
      editIndex: -1,
      editAddressId: null, // 编辑时的地址ID
      loading: false,
      phoneError: '', // 手机号错误提示
      formData: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        address: '',
        isDefault: false
      },
      addressList: [],
      // 省市区选择器数据
      cityData: cityData,
      pickerColumns: [cityData, [], []], // 省、市、区三列
      pickerValue: [0, 0, 0], // 当前选中的索引
      regionText: '' // 显示的地区文本
    }
  },
  
  onLoad() {
    this.getStatusBarHeight()
    this.checkAuth()
    this.loadAddressList()
  },
  
  onShow() {
    // 从其他页面返回时重新加载地址列表
    this.loadAddressList()
  },
  
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
    },
    
    // 检查认证状态
    checkAuth() {
      const loginStatus = authService.checkLoginStatus()
      if (!loginStatus.isLoggedIn) {
        uni.showToast({
          title: '请先登录',
          icon: 'error'
        })
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }, 1500)
        return false
      }
      return true
    },
    
    // 加载地址列表
    async loadAddressList() {
      if (!this.checkAuth() || this.loading) return
      
      this.loading = true
      
      try {
        const response = await addressService.getAddressList()
        
        // 解析地址数据
        const addresses = response?.data || []
        
        if (Array.isArray(addresses)) {
          this.addressList = addresses.map(addr => ({
            id: addr.id,
            name: addr.name,
            phone: addr.phone,
            province: addr.province,
            city: addr.city,
            district: addr.district,
            address: `${addr.province}${addr.city}${addr.district}${addr.address}`,
            detailAddress: addr.address,
            isDefault: !!(addr.isDefault || addr.is_default)
          }))
        } else {
          this.addressList = []
        }
        
      } catch (error) {
        console.error('加载地址列表失败:', error)
        
        uni.showToast({
          title: '加载地址失败',
          icon: 'error',
          duration: 2000
        })
        
        // 如果是认证失败，跳转到登录页
        if (error.message.includes('401')) {
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }, 1500)
        }
      } finally {
        this.loading = false
      }
    },
    
    // 返回上一页
    goBack() {
      backToProfile()
    },
    
    // 添加地址
    addAddress() {
      this.isEdit = false
      this.editIndex = -1
      this.editAddressId = null
      this.formData = {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        address: '',
        isDefault: false
      }
      this.regionText = ''
      // 初始化选择器为第一个省市区
      this.pickerValue = [0, 0, 0]
      this.pickerColumns = [
        this.cityData,
        this.cityData[0].children || [],
        this.cityData[0].children[0]?.children || []
      ]
      this.addressFormVisible = true
    },
    
    // 编辑地址
    editAddress(item, index) {
      this.isEdit = true
      this.editIndex = index
      this.editAddressId = item.id
      this.formData = {
        name: item.name,
        phone: item.phone,
        province: item.province,
        city: item.city,
        district: item.district,
        address: item.detailAddress || item.address,
        isDefault: item.isDefault
      }
      // 初始化地区选择器回显
      this.initRegionPicker(item.province, item.city, item.district)
      this.addressFormVisible = true
    },
    
    // 删除地址
    async deleteAddress(index) {
      const addressItem = this.addressList[index]
      if (!addressItem || !addressItem.id) {
        uni.showToast({
          title: '地址信息错误',
          icon: 'error'
        })
        return
      }
      
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个地址吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await addressService.deleteAddress(addressItem.id)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              // 重新加载地址列表
              setTimeout(() => {
                this.loadAddressList()
              }, 500)
            } catch (error) {
              console.error('删除地址失败:', error)
              uni.showToast({
                title: '删除失败',
                icon: 'error'
              })
            }
          }
        }
      })
    },
    
    // 设置默认地址
    async setDefaultAddress(item, index) {
      if (!item || !item.id) {
        uni.showToast({
          title: '地址信息错误',
          icon: 'error'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '设置中...',
          mask: true
        })
        
        await addressService.setDefaultAddress(item.id)
        
        uni.showToast({
          title: '设置成功',
          icon: 'success'
        })
        
        // 重新加载地址列表
        setTimeout(() => {
          this.loadAddressList()
        }, 500)
        
      } catch (error) {
        console.error('设置默认地址失败:', error)
        uni.showToast({
          title: '设置失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 选择地址
    selectAddress(item) {
      console.log('选择地址:', item)
      // 如果是从订单页面跳转过来的，选择地址后返回
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      console.log('上一页路由:', prevPage ? prevPage.route : '无')
      
      if (prevPage && prevPage.route === 'pages/order/order') {
        // 将选中的地址存储到本地存储
        uni.setStorageSync('selectedAddress', item)
        console.log('地址已存储到本地存储')
        // 返回订单页
        smartBack('/pages/order/order')
      } else {
        // 如果不是从订单页面来的，显示地址详情或进行其他操作
        uni.showToast({
          title: '已选择地址',
          icon: 'success'
        })
      }
    },
    
    // 关闭表单
    closeForm() {
      this.addressFormVisible = false
      this.isEdit = false
      this.editIndex = -1
      this.editAddressId = null
      this.phoneError = ''
      this.regionText = ''
      this.formData = {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        address: '',
        isDefault: false
      }
    },
    
    // 切换默认地址
    toggleDefault() {
      this.formData.isDefault = !this.formData.isDefault
    },
    
    // 省市区选择器 - 列变化事件
    onColumnChange(e) {
      const { column, value } = e.detail
      const pickerValue = [...this.pickerValue]
      pickerValue[column] = value
      
      if (column === 0) {
        // 省份变化，更新市列表
        const cities = this.cityData[value].children || []
        this.pickerColumns[1] = cities
        this.pickerColumns[2] = cities.length > 0 ? (cities[0].children || []) : []
        pickerValue[1] = 0
        pickerValue[2] = 0
      } else if (column === 1) {
        // 城市变化，更新区列表
        const districts = this.pickerColumns[1][value].children || []
        this.pickerColumns[2] = districts
        pickerValue[2] = 0
      }
      
      this.pickerValue = pickerValue
      this.pickerColumns = [...this.pickerColumns]
    },
    
    // 省市区选择器 - 确认选择
    onRegionChange(e) {
      const { value } = e.detail
      this.pickerValue = value
      
      const province = this.cityData[value[0]]
      const city = this.pickerColumns[1][value[1]]
      const district = this.pickerColumns[2][value[2]]
      
      if (province && city && district) {
        this.formData.province = province.value
        this.formData.city = city.value
        this.formData.district = district.value
        this.regionText = `${province.label} ${city.label} ${district.label}`
      }
    },
    
    // 初始化省市区选择器（编辑时回显）
    initRegionPicker(province, city, district) {
      try {
        // 查找省份索引
        const provinceIndex = this.cityData.findIndex(p => p.value === province)
        if (provinceIndex === -1) {
          // 如果找不到，使用默认值
          this.pickerValue = [0, 0, 0]
          this.pickerColumns[1] = this.cityData[0].children || []
          this.pickerColumns[2] = this.cityData[0].children[0]?.children || []
          return
        }
        
        // 更新市列表
        const cities = this.cityData[provinceIndex].children || []
        this.pickerColumns[1] = cities
        
        // 查找城市索引
        const cityIndex = cities.findIndex(c => c.value === city)
        if (cityIndex === -1) {
          this.pickerValue = [provinceIndex, 0, 0]
          this.pickerColumns[2] = cities[0]?.children || []
          return
        }
        
        // 更新区列表
        const districts = cities[cityIndex].children || []
        this.pickerColumns[2] = districts
        
        // 查找区索引
        const districtIndex = districts.findIndex(d => d.value === district)
        if (districtIndex === -1) {
          this.pickerValue = [provinceIndex, cityIndex, 0]
          return
        }
        
        this.pickerValue = [provinceIndex, cityIndex, districtIndex]
        this.regionText = `${province} ${city} ${district}`
        
      } catch (error) {
        console.error('初始化地区选择器失败:', error)
        this.pickerValue = [0, 0, 0]
        this.pickerColumns[1] = this.cityData[0].children || []
        this.pickerColumns[2] = this.cityData[0].children[0]?.children || []
      }
    },
    
    // 验证手机号
    validatePhone() {
      const phoneStr = (this.formData.phone || '').trim()
      if (!phoneStr) {
        this.phoneError = ''
        return
      }
      
      if (phoneStr.length !== 11) {
        this.phoneError = `手机号应为11位数字，当前${phoneStr.length}位`
      } else if (!phoneStr.startsWith('1')) {
        this.phoneError = '手机号应以1开头'
      } else if (!/^1[3-9]/.test(phoneStr)) {
        this.phoneError = '手机号第二位应为3-9之间的数字'
      } else if (!/^\d+$/.test(phoneStr)) {
        this.phoneError = '手机号只能包含数字'
      } else {
        this.phoneError = ''
      }
    },
    
    // 清除手机号错误提示
    clearPhoneError() {
      if (this.phoneError) {
        this.phoneError = ''
      }
    },
    
    // 保存地址
    async saveAddress() {
      console.log('保存地址 - 表单数据:', this.formData)
      console.log('保存地址 - isDefault值:', this.formData.isDefault, '类型:', typeof this.formData.isDefault)
      
      const validateResult = this.validateForm()
      console.log('表单验证结果:', validateResult)
      if (!validateResult) {
        console.log('表单验证失败')
        return
      }
      
      uni.showLoading({
        title: this.isEdit ? '保存中...' : '添加中...',
        mask: true
      })
      
      try {
        const addressData = {
          name: (this.formData.name || '').trim(),
          phone: (this.formData.phone || '').trim(),
          province: (this.formData.province || '').trim(),
          city: (this.formData.city || '').trim(),
          district: (this.formData.district || '').trim(),
          address: (this.formData.address || '').trim(),
          isDefault: this.formData.isDefault || false
        }
        
        
        if (this.isEdit && this.editAddressId) {
          // 编辑地址
          await addressService.updateAddress(this.editAddressId, addressData)
          uni.showToast({
            title: '地址修改成功',
            icon: 'success'
          })
        } else {
          // 新增地址
          await addressService.addAddress(addressData)
          uni.showToast({
            title: '地址添加成功',
            icon: 'success'
          })
        }
        
        // 关闭表单并重新加载地址列表
        this.closeForm()
        setTimeout(() => {
          this.loadAddressList()
        }, 500)
        
      } catch (error) {
        console.error('保存地址失败:', error)
        
        let errorMsg = '保存失败'
        if (error.message.includes('400')) {
          errorMsg = '地址信息格式不正确'
        } else if (error.message.includes('401')) {
          errorMsg = '请重新登录'
        }
        
        uni.showToast({
          title: errorMsg,
          icon: 'error',
          duration: 2000
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 验证表单数据
    validateForm() {
      console.log('开始表单验证')
      console.log('姓名:', this.formData.name)
      console.log('手机号:', this.formData.phone)
      console.log('地址:', this.formData.address)
      console.log('是否默认:', this.formData.isDefault)
      
      if (!(this.formData.name || '').trim()) {
        console.log('姓名验证失败')
        uni.showToast({
          title: '请输入收货人姓名',
          icon: 'none'
        })
        return false
      }
      
      if (!(this.formData.phone || '').trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return false
      }
      
      // 验证手机号格式
      this.validatePhone()
      if (this.phoneError) {
        uni.showToast({
          title: this.phoneError,
          icon: 'none',
          duration: 3000
        })
        return false
      }
      
      // 验证省市区
      if (!(this.formData.province || '').trim()) {
        uni.showToast({
          title: '请选择所在地区',
          icon: 'none'
        })
        return false
      }
      
      if (!(this.formData.city || '').trim()) {
        uni.showToast({
          title: '请选择所在城市',
          icon: 'none'
        })
        return false
      }
      
      if (!(this.formData.district || '').trim()) {
        uni.showToast({
          title: '请选择所在区县',
          icon: 'none'
        })
        return false
      }
      
      if (!(this.formData.address || '').trim()) {
        uni.showToast({
          title: '请输入详细地址',
          icon: 'none'
        })
        return false
      }
      
      console.log('表单验证通过')
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.address-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.status-bar {
  background: #fff;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background: #fff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .nav-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    .back-icon {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .nav-center {
    flex: 1;
    text-align: center;
    
    .nav-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .nav-right {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .add-btn {
      font-size: 28rpx;
      color: #ff4757;
      font-weight: 600;
    }
  }
}

.address-list {
  flex: 1;
  padding: 20rpx;
}

.address-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
  
  .address-info {
    flex: 1;
    
    .address-header {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      
      .contact-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-right: 20rpx;
      }
      
      .contact-phone {
        font-size: 26rpx;
        color: #666;
        margin-right: 20rpx;
      }
      
      .default-tag {
        background: #ff4757;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        
        .default-text {
          font-size: 20rpx;
          color: #fff;
          font-weight: 600;
        }
      }
    }
    
    .address-detail {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
  
  .address-actions {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    
    .action-btn {
      padding: 8rpx 16rpx;
      border-radius: 12rpx;
      background: #f8f9fa;
      border: 1rpx solid #e9ecef;
      width: 120rpx;
      text-align: center;
      
      &.delete {
        background: #fff5f5;
        border-color: #ffcdd2;
        
        .action-text {
          color: #e53935;
        }
      }
      
      &.disabled {
        background: #f5f5f5;
        border-color: #ddd;
        
        .action-text {
          color: #999;
        }
      }
      
      .action-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .loading-text {
    font-size: 32rpx;
    color: #999;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 16rpx;
  }
  
  .empty-desc {
    font-size: 26rpx;
    color: #ccc;
  }
}

/* 地址表单弹窗 */
.address-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
}

.address-form {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 70vh;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  z-index: 101;
}

.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .form-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .close-btn {
    font-size: 32rpx;
    color: #999;
    cursor: pointer;
  }
}

.form-content {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 30rpx;
  
  .form-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .form-input {
    width: 100%;
    height: 80rpx;
    background: #f8f9fa;
    border: 2rpx solid #e1e5e9;
    border-radius: 12rpx;
    
    &.error {
      border-color: #e53935;
      background: #fff5f5;
    }
  }
  
  .error-text {
    font-size: 24rpx;
    color: #e53935;
    margin-top: 8rpx;
    margin-left: 140rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    
    &:focus {
      border-color: #ff4757;
      background: #fff;
    }
  }
  
  // 地区选择器样式
  .picker-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80rpx;
    background: #f8f9fa;
    border: 2rpx solid #e1e5e9;
    border-radius: 12rpx;
    padding: 0 24rpx;
    
    .picker-text {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      
      &.placeholder {
        color: #999;
      }
    }
    
    .picker-arrow {
      font-size: 36rpx;
      color: #999;
      font-weight: bold;
      transform: rotate(90deg);
    }
  }
  
  .form-textarea {
    width: 100%;
    min-height: 120rpx;
    background: #f8f9fa;
    border: 2rpx solid #e1e5e9;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
    resize: none;
    
    &:focus {
      border-color: #ff4757;
      background: #fff;
    }
  }
  
  .default-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    
    .checkbox {
      width: 32rpx;
      height: 32rpx;
      border: 2rpx solid #ddd;
      border-radius: 6rpx;
      margin-right: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      
      &.checked {
        background: #ff4757;
        border-color: #ff4757;
      }
      
      .checkmark {
        color: white;
        font-size: 20rpx;
        font-weight: bold;
      }
    }
    
    .option-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.form-footer {
  padding: 30rpx;
  border-top: 1rpx solid #eee;
  
  .save-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
    color: white;
    border: none;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
    }
  }
}
</style>
